<template>
  <div class="container page-slide-left"
       v-loading="loading">
    <el-row>
      <div class="block">
        <el-carousel trigger="click" height="140px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <img :src="item" alt="" class="carousel-item">
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-row>
    <el-row>
      <div class="card">
        <div class="charges">
          <div class="card-item">
            <div>本月已经赚取佣金(元)</div>
            <div class="amount">{{ transactionRecord.commissionByMonth }}</div>
          </div>
          <div class="card-item" style="margin-right: 24px;">
            <div>累计赚取佣金(元)</div>
            <div class="amount">{{ transactionRecord.allCommission }}</div>
          </div>
        </div>
        <div class="count">
          <div class="card-item">
            <div>今日交易笔数</div>
            <div class="amount">{{ transactionRecord.countOfToday }}</div>
          </div>
          <div class="card-item">
            <div>今日交易金额</div>
            <div class="amount">2500</div>
          </div>
          <div class="card-item" style="margin-right: 20px;">
            <div>有效交易数</div>
            <div class="amount">{{ transactionRecord.effectiveOfToday }}</div>
          </div>
        </div>
      </div>
    </el-row>
    <el-row class="count3">
      <el-col :span="8">
        <div class="card-item">
          <div>累计刷脸用户数</div>
          <div class="amount">{{ transactionRecord.countBrushFace }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card-item middle" style="margin-left: 12px">
          <div>当月刷脸笔数</div>
          <div class="amount">{{ transactionRecord.brushFaceOfMonth }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card-item" style="margin-left: 12px" @click="$router.push('/transactionList')">
          <div>交易统计列表</div>
          <div style="font-size: 11px;color: #333333;opacity: 0.34;margin-top: 6px;">查看详情 ></div>
        </div>
      </el-col>
    </el-row>
    <div class="count2" style="height: fit-content">
      <div style="width: calc(50% - 4.5px); border-radius: 4px;">
        <div class="card-item curDay">
          <div>当日累计手续费(元)</div>
          <div class="amount">{{ transactionRecord.serviceChargeByToday || 0 }}</div>
        </div>
      </div>
      <div style="width: calc(50% - 4.5px); border-radius: 4px;">
        <div class="card-item curMonth">
          <div>本月累计手续费(元)</div>
          <div class="amount">{{ transactionRecord.serviceChargeByMonth || 0 }}</div>
        </div>
      </div>
    </div>
    <el-row>
      <el-col style="font-size: 15px;
                     font-weight: 500;
                     text-align: left;
                     margin-top: 20px;
                     margin-bottom: 12px;">
        设备数据
      </el-col>
    </el-row>
    <div class="deviceData" v-show="!loading">
      <div class="card-item withdrawal" @click="$router.push('/withdrawDevice')" style="width: calc(50% - 4.5px);">
        <div>可提现设备</div>
        <div class="amount">{{ transactionRecord.withdrawableDeviceCount.total }}</div>
        <button>查看详情</button>
      </div>
      <div class="card-item obtained" style="width: calc(50% - 4.5px);">
        <div>已满获得奖励设备</div>
        <div class="amount">{{ transactionRecord.withdrawabledDeviceCount.total }}</div>
        <button>查看详情</button>
      </div>
    </div>
  </div>
</template>

<script>
import {getTransactionRecord} from '@/api/transactionRecord'
import {getCarouselImg} from '@/api/carouselImage'

export default {
  name: "home",
  data() {
    return {
      bannerList: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F10744505198%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631694406&t=cdb5bdb845732b4c7223041b190918dc",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg34.51tietu.net%2Fpic%2F2016-120602%2F201612060229274mntyvqhute90413.jpg&refer=http%3A%2F%2Fimg34.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631694443&t=e0f95670ff2a09e8dae8fa354a1832f3",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-06-08%2F5eddcd61b61b2.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631694443&t=b8fbee0f337d52321b6ddab5167d0bfe",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.article.pchome.net%2F00%2F38%2F14%2F82%2Fpic_lib%2Fs960x639%2F011s960x639.jpg&refer=http%3A%2F%2Fimg.article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631694443&t=b2d63aba569c21ab3992b12a0658d8df"
      ],
      loading: true
    }
  },
  created() {
    const that = this;
    getTransactionRecord().then(res => {
      console.log(res.data)
      that.transactionRecord = res.data.data
      that.loading = false
    }).catch((err) => {
      this.$notify.error({
        title: '错误',
        message: err,
        showClose: false,
        duration: 1000
      });
    })
    /*getCarouselImg().then(res => {
      that.bannerList = res.data.data
      console.log(res.data.data)
    })*/
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.card-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 12px;
  box-sizing: border-box;

  .amount {
    font-size: 18px;
    font-weight: 500;
    margin-top: 2px;
  }
}

.carousel-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card {
  position: relative;
  width: 100%;
  height: 182px;
  margin-top: 15px;
  background: url(../../assets/images/home/7.png) center no-repeat;
  background-size: cover;
  box-sizing: border-box;
  color: #fff;

  .charges {
    padding: 32px 20px 0;
    display: flex;
    justify-content: space-between;

    .amount {
      font-size: 25px;
    }
  }

  .count {
    position: absolute;
    bottom: 0;
    height: 67px;
    width: 100%;
    background: linear-gradient(91deg, rgba(255, 255, 255, 0.19) 8%, rgba(255, 255, 255, 0.05) 66%);
    display: flex;
    justify-content: space-between;
    padding: 12px 20px 7px;
    box-sizing: border-box;
  }
}

.count2 {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  height: 63px;

  .card-item {
    padding: 12px 20px;
    border-radius: 4px;
  }

  .curDay {
    background: #fff url(../../assets/images/home/8.png) center no-repeat;
    background-size: cover;
  }

  .curMonth {
    background: #fff url(../../assets/images/home/9.png) center no-repeat;
    background-size: cover;
  }
}

.count3 {
  margin-top: 15px;
  padding: 12px 20px;
  height: 67px;
  background: #fff;
  border-radius: 4px;

  .middle {
    position: relative;

    &::before {
      content: '';
      display: block;
      position: absolute;
      width: 1px;
      height: 18px;
      background: #333333;
      opacity: 0.08;
      left: -18px;
      top: 50%;
      transform: translateY(-50%)
    }

    &::after {
      content: '';
      display: block;
      position: absolute;
      width: 1px;
      height: 18px;
      background: #333333;
      opacity: 0.08;
      right: 2px;
      top: 50%;
      transform: translateY(-50%)
    }
  }
}

.deviceData {
  display: flex;
  justify-content: space-between;

  .card-item {
    color: #fff;
    padding: 20px;
    border-radius: 4px;

    button {
      width: 72px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 12px;
      background: #ffffff;
      border-radius: 11px;
      border: 0;
      font-size: 12px;
    }

    &.withdrawal {
      background: url(../../assets/images/home/4.png) center no-repeat;
      background-size: cover;

      & button {
        box-shadow: 0 0 6px 0 rgba(184, 149, 113, 0.60);
        color: #ccac8b;
      }
    }

    &.obtained {
      background: url(../../assets/images/home/10.png) center no-repeat;
      background-size: cover;

      & button {
        box-shadow: 0 0 6px 0 rgba(222, 94, 0, 0.60);
        color: #e86200;
      }
    }

  }
}

.el-carousel__item {
  border-radius: 4px;
}
</style>
